<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getDayMusic } from "../../apis/music";
import emitter from "../../utils/eventBus";
import { Local } from "../../utils/storage";

const playlist = ref([]);
const info = ref();
const router = useRouter();

const getInit = () => {
  getDayMusic().then((res) => {
    console.log(res);
    playlist.value = res.data.dailySongs;
    info.value = res.data.dailySongs[10];
    Local.set("dayMusic", res.data.dailySongs);
    console.log(info);
  });
};

getInit();

emitter.on("getdaymusic", () => {
  getInit();
});

const toDetail = (type) => {
  if (type == "1") {
    router.push("/daymusic");
  }
};
</script>

<template>
  <div class="day_wrap">
    <div v-if="info" @click="toDetail(1)" class="left">
      <el-image
        :src="info.al.picUrl + `${'?param=500y500'}`"
        fit="contain"
      ></el-image>
      <div class="title">每日推荐</div>
    </div>
    <div v-if="info" @click="toDetail(2)" class="right">
      <el-image
        :src="info.al.picUrl + `${'?param=500y500'}`"
        fit="fill"
      ></el-image>
      <div class="title">私人FM</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.day_wrap {
  cursor: pointer;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  .left,
  .right {
    height: 22vh;
    width: 48%;
    background-color: #ddd;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    .el-image {
      width: 100%;
      //   height: 100%;
      border-radius: 20px;
      animation: left 12s infinite alternate-reverse;
    }
    .title {
      width: 150px;
      height: 200px;
      left: 30px;
      font-size: 70px;
      font-weight: 600;
      position: absolute;
      top: 20px;
      color: #fff;
      line-height: 80px;
    }
    @keyframes left {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-100px);
      }
    }
  }
}
</style>
